<template>
	<view>
		<u-navbar :bgColor="bgColor" title="店铺首页" @leftClick="onBackClick" :titleStyle="titleStyle"
			leftIconColor="#E6A5B4">

		</u-navbar>
		<view class="bgV">
			<scroll-view style="height: 100%;" scroll-y="true" @scroll="onListenerScroll">
				<view class="topIv">
					<u-swiper :list="storesData.images" :autoplay="true" indicatorStyle="right: 20px" height="450rpx"
						radius="0" circular>
					</u-swiper>
				</view>
				<view class="centerV">
					<view class="titleV">
						<view class="titleTv">{{storesData.name}}</view>
					</view>
					<view class="timeV">
						<image class="timeIv" src="../../static/me/phone.svg"></image>
						<view class="timeTv">电话：{{storesData.tel}}</view>
					</view>
					<view class="gpsV">
						<image class="gpsIv" src="../../static/public/gps.svg"></image>
						<view class="gpsTv">地点：{{storesData.address}}</view>
						<view class="line"></view>
						<view class="mapV" @click="onMapClick(storesData)">
							<image class="mapIv" src="../../static/public/ditu.svg"></image>
							<view class="mapTv">地图</view>
						</view>
					</view>

					<view class="centttV">
						<view class="zengV">
							<image class="zengIv" src="../../static/me/manzeng.png"></image>
							<view class="zengBgV">
								<view class="subTv1">{{moneyData.price_title}}</view>
								<view class="subTv2">{{moneyData.price_memo}}</view>
							</view>
						</view>

						<view class="selectV">
							<u-grid :col="2">
								<u-grid-item v-for="(item,key) in moneyList" :key="key">
									<view :class="moneyPos==key?'selectItemVTo':'selectItemV'"
										@click="onItemClick(item,key)">
										<view class="moneyTv">¥{{item}}</view>
										<!-- <view class="songV">
											<view class="songTv1">送</view>
											<view class="songTv2">¥3200</view>
										</view> -->
									</view>
								</u-grid-item>
							</u-grid>

						</view>


						<view class="qitaV">其他金额</view>

						<view class="inputV">
							<view class="inputTv">¥</view>
							<input v-model="money" type="number" class="inputView" placeholder="请输入其他金额"
								maxlength="20" />
						</view>

						<view class="confirmV" @click="addRechage()">确认支付</view>
					</view>

					<view v-if="isLogin" class="youhuiV">
						<view class="youhuiTv">店铺优惠</view>

						<u-icon name="arrow-right" color="#BCBBBC" @click="onSingClick()"></u-icon>
					</view>
					<view v-if="index==0||index==1" class="itemV" v-for="(item,index) in couponList" :key="index">
						<image class="iv" src="../../static/me/quan_.svg" mode="aspectFill"></image>
						<view class="itemCenV">
							<view class="leftV">
								<view class="moneyV">
									<view class="moneyTv1">¥{{item.price}}</view>
									<view class="moneyTv2">{{item.memo}}</view>
								</view>
								<view class="timeV">有效期至：{{item.endtime}}</view>
							</view>
							<view class="rightV">
								<button class="shareTv">立即使用</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#383838">
			<view class="popupBg">
				<view class="titleV">
					<image class="iv" src=""></image>
					<view class="pupTitleTv">店铺优惠券</view>
					<image @tap="onClseClick" class="iv" src="../../static/public/colse.svg"></image>
				</view>

				<view class="itemV" v-for="(item,index) in couponList" :key="index">
					<image class="iv" src="../../static/me/quan_.svg" mode="aspectFill"></image>
					<view class="itemCenV">
						<view class="leftV">
							<view class="moneyV">
								<view class="moneyTv1">¥{{item.price}}</view>
								<view class="moneyTv2">{{item.memo}}</view>
							</view>
							<view class="timeV">有效期至：{{item.endtime}}</view>
						</view>
						<view class="rightV">
							<button class="shareTv">立即使用</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				storesData: {},
				couponList: [], //优惠券列表
				scrollTop: 0,
				bgColor: "#00000000",
				shopId: "", //门店id
				userId: "", //分享人用户id
				couponId: "", //优惠券id
				money: "0",
				moneyPos: 0,
				moneyList: [],
				moneyData: {},
				isLogin: false,
				mroleid:''
			}
		},
		onReady() {
			let hei = uni.getSystemInfoSync().statusBarHeight;
			this.scrollTop = hei;
		},
		onLoad(e) {
			this.shopId = e.shopid;
			this.userId = e.userid;
			this.couponId = e.couponid;
			this.mroleid = e.roleid;
			this.getRechargePrice();
			this.getStoresDetails();
			if (uni.getStorageSync("user_info")) {
				this.getMyCouponList();
				this.getBind();
				this.getShareParent();
				this.isLogin = true;
			} else {
				this.$refs.login.open({
					show: false
				});
				this.isLogin = false;
			}

		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if(pages[pages.length - 2]){
				  //如果有上一页，就返回上一页
				  wx.navigateBack({
				    delta: 1
				  })
				}else{
				  uni.switchTab({
				  	url: '/pages/app/Home'
				  });
				}

			},
			onListenerScroll: function(value) {
				if (value.detail.scrollTop > this.scrollTop) {
					this.bgColor = "#FFFFFF"
				} else {
					this.bgColor = "#00000000"
				}
			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getMyCouponList();
					this.getBind();
					this.getShareParent();
					this.isLogin = true;
				} else {
					this.isLogin = false;
				}
			},
			getRechargePrice() { //获取充值配置
				this.$api.getRechargePrice({

				}).then((res) => {
					this.moneyList = res.price_list
					this.moneyData = res;
					if (this.moneyList.length > 0) {
						this.money = this.moneyList[0];
					}
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "充值信息获取失败" : e.msg)
				})
			},
			getStoresDetails() { //获取门店详情
				this.$api.getStoresDetails({
					shop_id: this.shopId
				}).then((res) => {
					this.storesData = res.info;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取信息失败" : e.msg)
				})
			},
			getMyCouponList() { //获取我的优惠券
				this.$api.getMyCouponList({
					shop_id: this.shopId
				}).then((res) => {
					this.couponList = res.rows;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取优惠券失败" : e.msg)
				})
			},
			getBind() { //绑定上下级
				this.$api.getBind({
					share_id: this.userId,
					coupon_id: this.couponId
				}).then((res) => {

				}).catch((e) => {

				})
			},
			getShareParent() { //绑定上下级
				this.$api.getShareParent({
					share_id: this.userId,
					coupon_id: this.couponId,
					role_id:this.mroleid
				}).then((res) => {
			
				}).catch((e) => {
			
				})
			},
			addRechage() { //充值
				if (!this.isLogin) {
					
					this.$refs.login.open({
						show: false
					});
					return
				}
				if (this.money == 0) {
					uni.$u.toast("请输入充值金额")
					return;
				}
				this.$api.addRechage({
					price: this.money,
					shop_id: this.shopId
				}).then((res) => {
					this.pay(res.order_id);
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "充值失败" : e.msg)
				})
			},
			pay(orderid) {
				this.$api.rechargePay({
					order_id: orderid,
				}).then((res) => {
					this.payOrder(res);
				}).catch((e) => {
					uni.$u.toast("充值失败");
				})
			},
			payOrder(payData) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonceStr,
					package: payData.package,
					signType: payData.signType,
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("充值成功");
					},
					fail: function(err) {
						uni.$u.toast("充值失败");
					}
				})
			},
			onSingClick() {
				this.$refs.popup.open()
			},
			onClseClick() {
				this.$refs.popup.close()
			},
			onItemClick(item, index) {
				this.money = item + "";
				this.moneyPos = index;
			},
			onMapClick(item){
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.openLocation({
							longitude: parseFloat(item.longitude),
							latitude: parseFloat(item.latitude),
							name:item.name,//位置名
							address:"",//详细地址
							success: function (res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
							},
							fail(res){
								console.log("====="+JSON.stringify(res))
							}
						});
					},
					fail() {
						uni.showModal({
							title: '未打开小程序定位',
							content: '找不到您的位置，请开启定位',
							confirmText: '开启定位',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.openSetting(); // 打开地图权限设置
								}
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bgV {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;

		.topIv {
			width: 100%;
			height: 450rpx;
			background-color: #CEF743;
		}

		.centerV {
			width: 100%;
			height: 100%;
			flex: 1;
			border-radius: 10px 10px 0rpx 0rpx;
			position: absolute;
			top: 430rpx;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 50rpx;
				box-sizing: border-box;

				.titleTv {
					color: #e8e8e8;
					font-size: 36rpx;
					max-width: 450rpx;
					min-width: 450rpx;
				}
			}

			.timeV {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.timeIv {
					width: 30rpx;
					height: 30rpx;
				}

				.timeTv {
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}
			}

			.gpsV {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-left: 30rpx;
				padding-right: 10rpx;

				.gpsIv {
					width: 30rpx;
					height: 30rpx;
				}

				.gpsTv {
					flex: 1;
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}

				.line {
					width: 1rpx;
					height: 48rpx;
					background: #D8D8D8;
					margin-left: 30rpx;
					margin-right: 30rpx;
				}

				.mapV {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-left: 20rpx;
					padding-right: 20rpx;

					.mapIv {
						width: 32rpx;
						height: 32rpx;
					}

					.mapTv {
						margin-top: 1rpx;
						font-size: 24rpx;
						color: #8d8d8d;
					}
				}
			}

			.centttV {
				background-color: #1f1f1f;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 70rpx;
				padding-bottom: 30rpx;

				.zengV {
					height: 150rpx;
					width: 100%;
					position: relative;

					.zengIv {
						width: 100%;
						height: 100%;
					}

					.zengBgV {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.subTv1 {
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.subTv2 {
							font-size: 35rpx;
							color: #CEF743;
						}
					}
				}

				.selectV {
					display: flex;
					margin-top: 15rpx;
					padding-left: 15rpx;
					padding-right: 15rpx;

					.selectItemV {
						width: 90%;
						height: 160rpx;
						background: #A0AC77;
						border-radius: 15rpx;
						border: 3rpx solid #00000000;
						display: flex;
						margin-top: 15rpx;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.moneyTv {
							font-size: 45rpx;
							color: #333;
						}

						.songV {
							display: flex;
							align-items: center;
							justify-content: center;

							.songTv1 {
								font-size: 28rpx;
								color: #333333;
							}

							.songTv2 {
								font-size: 32rpx;
								color: #E92F2F;
							}
						}
					}

					.selectItemVTo {
						width: 90%;
						height: 160rpx;
						background: #CEF743;
						border-radius: 15rpx;
						border: 3rpx solid #FFFFFF;
						display: flex;
						margin-top: 15rpx;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.moneyTv {
							font-size: 45rpx;
							color: #333;
						}

						.songV {
							display: flex;
							align-items: center;
							justify-content: center;

							.songTv1 {
								font-size: 28rpx;
								color: #333333;
							}

							.songTv2 {
								font-size: 32rpx;
								color: #E92F2F;
							}
						}
					}

				}

				.qitaV {
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 15rpx;
					margin-left: 30rpx;
				}

				.inputV {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;
					height: 100rpx;
					background: #3D3F3E;
					border-radius: 15rpx;
					padding-left: 30rpx;
					padding-right: 30rpx;

					.inputTv {
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.inputView {
						color: #FFFFFF;
						font-size: 35rpx;
						height: 100%;
						padding-left: 20rpx;
						padding-right: 20rpx;
					}
				}

				.confirmV {
					margin-left: 30rpx;
					margin-right: 30rpx;
					margin-top: 30rpx;
					height: 100rpx;
					background: #CEF743;
					border-radius: 10rpx;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.youhuiV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 70rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;

				.youhuiTv {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.itemV {
				position: relative;
				height: 200rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 30rpx;

				.iv {
					height: 100%;
					width: 100%;
				}

				.itemCenV {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					display: flex;
					height: 100%;

					.leftV {
						flex: 7;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 30rpx;

						.moneyV {
							display: flex;
							align-items: baseline;

							.moneyTv1 {
								font-size: 60rpx;
								color: #333333;
							}

							.moneyTv2 {
								margin-left: 5 rpx;
								font-size: 24rpx;
								color: #999999;
							}
						}

						.timeV {
							display: flex;
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.rightV {
						flex: 3;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.shareTv {
							background: #1F1F1F;
							border-radius: 6rpx;
							color: #fff;
							padding-left: 22rpx;
							padding-right: 22rpx;
							font-size: 24rpx;
						}

						.shengyuTv {
							margin-top: 19rpx;
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
			}
		}
	}

	.popupBg {
		height: 854rpx;
		border-radius: 20rpx 20rpx 0px 0px;

		.titleV {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.pupTitleTv {
				font-size: 32rpx;
				color: #E8E8E8;
			}

			.iv {
				width: 42rpx;
				height: 42rpx;
			}
		}

		.itemV {
			position: relative;
			height: 200rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-top: 30rpx;

			.iv {
				height: 100%;
				width: 100%;
			}

			.itemCenV {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				display: flex;
				height: 100%;

				.leftV {
					flex: 7;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 30rpx;

					.moneyV {
						display: flex;
						align-items: baseline;

						.moneyTv1 {
							font-size: 60rpx;
							color: #333333;
						}

						.moneyTv2 {
							margin-left: 5 rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.timeV {
						display: flex;
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.rightV {
					flex: 3;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.shareTv {
						background: #1F1F1F;
						border-radius: 6rpx;
						color: #fff;
						padding-left: 22rpx;
						padding-right: 22rpx;
						font-size: 24rpx;
					}

					.shengyuTv {
						margin-top: 19rpx;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}

	}
</style>
